<template>
  <div class="container">
    <div class="header flex-row" style="z-index: 999">
      <div class="header-logo" @click="toIndex">
        <img class="header-logo-img" src="@/assets/images/v2/logo.png" alt />
        <span class="header-logo-desc">实战方案获取工具</span>
      </div>
      <!-- <div class="header-menu">
      <div
        class="header-menu-item"
        :class="$route.path == '/report' ? 'active' : ''"
        @click="toReport"
      >
        <img
          v-if="$route.path == '/report'"
          src="@/assets/images/report-white.png"
          class="header-menu-item-icon"
          alt
        />
        <img
          v-else
          src="@/assets/images/report.png"
          class="header-menu-item-icon"
          alt
        />
        <div class="header-menu-item-text">搜索方案</div>
      </div>

      <div
        class="header-menu-item"
        :class="$route.path.includes('/aboutVip') ? 'active' : ''"
        @click="toAboutVip"
      >
        <img
          v-if="$route.path.includes('/aboutVip')"
          src="@/assets/images/vip-white.png"
          class="header-menu-item-icon"
          alt
        />
        <img
          v-else
          src="@/assets/images/VIPheader.png"
          class="header-menu-item-icon"
          alt
        />
        <div class="header-menu-item-text">开通会员</div>
      </div>
    </div> -->
      <div class="header-user">
        <div class="header-user-btn" v-if="!token">
          <div class="header-user-btn-login" @click="loginVisible = true">
            登录
          </div>
          <div class="header-user-btn-register" @click="loginVisible = true">
            注册
          </div>
        </div>
        <div class="customer" v-if="token">
          <div
            @click="toVip"
            class="flex justify-content-center align-items-center"
          >
            <img
              style="width: 16px; height: 16px; padding-bottom: 3px"
              src="@/assets/images/vip.png"
              v-if="vip_last_day > 0"
              alt
            />
            <div
              class="customer-noneVip"
              :class="[vip_last_day > 0 ? 'activeRed' : 'activeGray']"
              style="cursor: pointer"
            >
              {{ vip_last_day > 0 ? "年度会员" : "未开通会员" }}
            </div>
          </div>
          <el-dropdown>
            <div class="flex justify-content-center align-items-center">
              <div class="customer-name">{{ name }}</div>
              <div class="customer-avatar">
                <el-avatar :size="32" :src="avatar"></el-avatar>
              </div>
              <i
                class="el-icon-arrow-down customer-arrow-down"
                style="color: #3f4750"
              ></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 220px">
              <el-dropdown-item>
                <div class="action-list">
                  <div>用户id：{{ uid }}</div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="action-list">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/blacktea.png"
                  />
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      width: 300px;
                    "
                  >
                    <div>剩余茶叶：{{ balance }}</div>
                    <div
                      slot="reference"
                      style="color: #388ae9"
                      @click="charge"
                    >
                      充值
                    </div>
                  </div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="action-list">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/vip-2.png"
                  />
                  <div>剩余天数：{{ vip_last_day }}天</div>
                </div>
              </el-dropdown-item>

              <el-dropdown-item>
                <div class="action-list" @click="toMyCollection">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/favorite.png"
                  />
                  <div>我的收藏</div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="action-list" @click="toMyRecord">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/history.png"
                  />
                  <div>浏览历史</div>
                </div>
              </el-dropdown-item>

              <el-dropdown-item divided>
                <div class="action-list" @click="loginOut">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/logout-icon.png"
                  />
                  <div>退出登录</div>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-dialog
        :visible.sync="loginVisible"
        width="500px"
        :modal="false"
        append-to-body
      >
        <el-radio-group
          v-model="tabActive"
          style="width: 100%"
          class="radio-group"
        >
          <el-button label="first" style="width: 100%"
            >微信扫描二维码登录</el-button
          >
        </el-radio-group>
        <login-qrcode
          v-if="tabActive == 'first' && loginVisible"
          v-on:loginsucc="loginSubmit"
          :keepcount="loginVisible"
        ></login-qrcode>
        <div class="hint">
          登录即表示同意
          <a href="/protocol" target="_blank">《用户协议》</a>和
          <a href="/privacy" target="_blank">《隐私政策》</a>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="phoneVisible"
        width="30%"
        append-to-body
        :modal="false"
      >
        <el-input
          placeholder="填写手机号码"
          v-model="phoneForm.phone"
        ></el-input>
        <el-input
          style="margin-top: 12px"
          type="password"
          placeholder="填写密码"
          v-model="phoneForm.pwd"
        ></el-input>
        <div
          class="flex justify-content-start align-items-center"
          style="margin-top: 12px"
        >
          <div style="flex: 1">
            <el-input
              v-model="phoneForm.code"
              placeholder="填写验证码"
              width="180"
            ></el-input>
          </div>
          <div style="flex: none; margin-left: 12px">
            <el-button
              type="primary"
              @click="getPhoneVerifyCode"
              :disabled="codeText != '获取验证码'"
              >{{ codeText }}</el-button
            >
          </div>
        </div>
        <el-button
          type="primary"
          style="width: 100%; margin-top: 50px"
          @click="onFinish"
          >完成</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>

<script>
import LoginQrCodeComp from "@/components/LoginQrCodeComp";
import LoginPhoneComp from "@/components/LoginPhoneComp";
import LoginPasswordComp from "@/components/LoginPasswordComp";

import { mapGetters } from "vuex";
import { sendSms, phoneBind } from "@/api/login";
import { getMine } from "@/api/user";

export default {
  data() {
    return {
      myTea: 0,
      loginPhoneVisible: false,
      // loginVisible:false,
      phoneVisible: false,
      loginPhoneMode: 1,
      tabActive: "first",
      circleUrl:
        "http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&hs=0&pn=1&spn=0&di=140360&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1408233282%2C1483083519&os=1395275105%2C1641907420&simid=3475840035%2C321626526&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=head&bdtype=0&oriquery=%E5%A4%B4%E5%83%8F&objurl=http%3A%2F%2Fimage.yy.com%2Fyywebalbumbs2bucket%2F144152f8680f421599233c6ffcfcef49_1476265267104.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Byy_z%26e3Bv54AzdH3F7AzdH3Fri5p5AzdH3Fwsk74fAzdH3Fdc0bccn&gsm=2&islist=&querylist=",
      phoneForm: {
        phone: "",
        pwd: "",
        code: "",
      },
      codeText: "获取验证码",
      codeCount: 60,
      codeInterval: null,
    };
  },
  components: {
    "login-qrcode": LoginQrCodeComp,
    "login-phone": LoginPhoneComp,
    "login-pass": LoginPasswordComp,
  },
  created() {
    this.$store.dispatch("GetInfo");
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "sid",
      "uid",
      "token",
      "name",
      "avatar",
      "showLogin",
      "unlock_chart",
      "user_type",
      "is_vip",
      "vCount",
      "vip_last_day",
      "balance",
    ]),
    loginVisible: {
      get() {
        return this.showLogin;
      },
      set(value) {
        this.$store.commit("SET_SHOW", value);
        this.loginPhoneMode = 1;
      },
    },
  },
  methods: {
    loginSubmit() {
      //知乎统计扫码登录
      console.log("loginSubmit");
      this.loginVisible = false;
      // this.$store.dispatch("GetInfo");
      // window.location.reload();
    },
    toReport() {
      this.$router.push({
        path: "/report",
      });
    },
    toDataChat() {
      this.$router.push({
        path: "/chart",
      });
    },
    toGroup() {
      if (this.sid) {
        this.$router.push({
          path: "/group/index",
        });
      } else {
        this.loginVisible = true;
      }
    },
    inGroup() {
      return this.$route.path.includes("/group");
    },
    loginOut() {
      this.$store.dispatch("LogOut");
      setTimeout(() => {
        this.$router.push({
          path: "/index",
        });
      }, 3000);
    },
    getPhoneVerifyCode() {
      console.log("获取验证码");
      // 发送请求
      if (this.codeText != "获取验证码") {
        return;
      }
      // 发送请求
      this.codeInterval = setInterval(() => {
        this.codeText = this.codeCount--;
        if (this.codeText == 0) {
          clearInterval(this.codeInterval);
          this.codeInterval = null;
          this.codeText = "获取验证码";
          this.codeCount = 60;
        }
      }, 1000);
      sendSms(this.phoneForm.phone).then((res) => {
        this.$message.info("验证码已发送, 有效时间5分钟");
      });
    },
    onFinish() {
      phoneBind(this.phoneForm).then((res) => {
        this.phoneVisible = false;
        this.$message.success("绑定成功");
      });
    },
    toVip() {
      this.$router.push({
        path: "/aboutVip",
      });
    },
    toAboutVip() {
      // if (this.sid) {
      this.$router.push({
        path: "/aboutVip",
      });
      // } else {
      //   this.loginVisible = true;
      // }
    },
    toMyUpload() {
      this.$router.push({
        path: "/myUpload",
      });
    },
    toInviteList() {
      this.$router.push({
        path: "/inviteList",
      });
    },
    toMyCollection() {
      this.$router.push({
        path: "/myCollection",
      });
    },
    toMyRecord() {
      this.$router.push({
        path: "/myRecord",
      });
    },
    toIndex() {
      this.$router.push({
        path: "/",
      });
    },
    charge() {
      this.$router.push({
        path: "/aboutVip",
      });
    },
  },
};
</script>

<style scoped lang="less">
.radio-group {
  /deep/ .el-radio-button__inner {
    width: 100%;
  }
}
.mini {
  margin: 10px;
  .mini-qrcode {
    width: 148px;
    height: 148px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .mini-header {
    font-size: 16px;
    color: #8e969d;
    margin-bottom: 4px;
    text-align: center;
  }
}
.container {
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
.header {
  width: 100%;
  height: 54px;
  max-width: 1250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  &-logo {
    left: 0;
    top: 0;
    color: #fff;
    padding: 12px 0;
    padding-left: 20px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &-img {
      width: 140px;
      height: 24px;
      display: block;
    }
    &-title {
      margin: 0 8px;
      font-size: 20px;
      font-weight: 600;
    }
    &-desc {
      margin-left: 8px;
      margin-top: 7px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 12px;
      color: #3f4750;
    }
  }
  &-menu {
    width: 480px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      cursor: pointer;
      &-icon {
        width: 24px;
        height: 24px;
        display: block;
        margin-right: 4px;
      }
      &-text {
        font-size: 16px;
        color: @menu-text-color;
      }
    }
    .active {
      background: @menu-active-color;
    }
    // .mini-qrcode-hover:hover{
    //     background: @menu-active-color;
    // }
  }
  &-user {
    height: 100%;
    right: 0;
    top: 0;
    &-btn {
      padding-right: 20px;
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      &-login {
        width: 80px;
        height: 32px;
        background: #3373d4;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        margin-right: 8px;
        cursor: pointer;
      }
      &-register {
        width: 80px;
        height: 32px;
        border-radius: 16px;
        border: 1px solid #3373d4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3373d4;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #3373d4;
        cursor: pointer;
      }
    }
    .customer {
      display: flex;
      align-items: center;
      height: 100%;
      &-noneVip {
        font-size: 12px;
        margin: 0 8px 0 4px;
      }
      &-name {
        font-size: 16px;
        color: #3f4750;
      }
      &-avatar {
        margin: 0 8px 0 8px;
      }
      &-arrow-down {
        margin-right: 14px;
      }
    }
  }
}
.action-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: #3f4750;
  &-icon {
    width: 24px;
    height: 24px;
    display: block;
    margin-right: 8px;
  }
}
.activeRed {
  color: rgb(250, 132, 52);
}
.activeGray {
  color: #8e969d;
}
.hint {
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

.hint a {
  cursor: pointer;
  color: #4b91ea;
  text-decoration: none;
}
</style>
